<template>
  <div>
    <el-dialog title="发货编号选择" :visible="ayncVisible" @close="ayncVisible = false" width="70%" append-to-body>
      <div style="margin-bottom: 10px">
        <el-row style="display: flex">
          <!-- <div style="display: flex;align-items: center;"><span>出库日期：</span>
            <el-date-picker
              size="small"
              v-model="ayncTime"
              style="width: 250px;"
              type="daterange"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
            >
            </el-date-picker></div> -->
          <div style="margin-left: 20px; display: flex; align-items: center">
            <span> 发票日期：</span>
            <el-date-picker
              size="small"
              style="width: 250px"
              v-model="kpTime"
              type="daterange"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
            >
            </el-date-picker>
          </div>
          <div style="margin-left: 20px; vertical-align: middle">
            <el-radio-group
              @change="
                () => {
                  ayncPagination.page = 1
                }
              "
              v-model="selectType"
            >
              <el-radio v-for="item in selectTypeList" :key="item.value" :label="item.value">{{ item.label }}</el-radio>
            </el-radio-group>
          </div>
          <div style="margin-left: 20px; display: flex; align-items: center">
            <el-input size="small" style="width: 250px" v-model="qryWord" placeholder="请输入客户名称/编码/发票编号">
            </el-input>
          </div>
          <div><el-button size="small" type="primary" style="margin-left: 12px" @click="serach()">查询</el-button></div>
        </el-row>
        <el-row :gutter="20">
          <el-col
            style="margin-left: 20px; margin-top: 10px; display: flex; align-items: center"
            :xs="12"
            :sm="12"
            :md="12"
            :lg="12"
            :xl="12"
          >
            当前选中编号：{{ radioSelect }}
          </el-col>
        </el-row>
      </div>
      <el-table
        ref="singleTable"
        border
        max-height="250"
        size="mini"
        :data="tableDataList"
        style="width: 100%"
        v-loading="loading"
      >
        <!-- @selection-change="tableChange" -->
        <!-- <el-table-column type="selection" :selectable="checkSelectable" width="55"> </el-table-column> -->
        <!-- <el-table-column type="index" width="40"> </el-table-column> -->
        <el-table-column prop="Code" label="" width="35">
          <template slot-scope="scope">
            <el-radio v-model="radioSelect" class="radio-class" :label="scope.row.Code"></el-radio>
          </template>
        </el-table-column>
        <el-table-column prop="Code" label="发票编号" width="120"> </el-table-column>
        <el-table-column prop="BusType" label="销售类型" width="70"> </el-table-column>
        <el-table-column prop="CusCode" label="客户编号" width="190"> </el-table-column>
        <el-table-column prop="CusName" label="客户名称"> </el-table-column>
        <el-table-column prop="MadeDate" label="发票日期" width="95"> </el-table-column>
        <el-table-column prop="TaxAmount" label="含税金额合计" header-align="center" width="150" align="right">
          <template slot-scope="scope">
            <el-statistic group-separator="," :precision="2" :value="scope.row.TaxAmount"></el-statistic>
          </template>
        </el-table-column>
      </el-table>
      <!-- total, sizes, prev, pager, next, jumper -->
      <el-pagination
        @size-change="aynchandleSizeChange"
        @current-change="aynchandleCurrentChange"
        :current-page="ayncPagination.page"
        :page-sizes="[25, 50, 100]"
        :page-size="25"
        style="text-align: right; margin-top: 5px"
        layout="total,prev,pager,next,sizes"
        :total="ayncPagination.total"
      >
      </el-pagination>
      <div slot="footer">
        <el-button @click="ayncVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleOk" :loading="loading">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import moment from 'moment'

export default {
  data() {
    return {
      ayncTime: [moment().format('YYYY-MM-DD'), moment().format('YYYY-MM-DD')],
      kpTime: [moment().format('YYYY-MM-DD'), moment().format('YYYY-MM-DD')],
      ayncData: [],
      qryWord: '',
      loading: false,
      ayncVisible: false,
      selectionList: [],
      ayncPagination: {
        size: 25,
        page: 1,
        total: 0,
      },
      selectTypeList: [
        {
          label: '待生成',
          value: 1,
        },
        {
          label: '已生成',
          value: 0,
        },
      ],
      selectType: 1,

      currentRow: null,
      selectId: null,
      radioSelect: null,
      selectRows: [],
    }
  },
  props: {},
  components: {},
  methods: {
    checkSelectable(row) {
      if (row.State == 0) {
        // 禁用不可选行
        return false
      } else {
        return true
      }
    },
    open() {
      this.ayncTime = [moment().format('YYYY-MM-DD'), moment().format('YYYY-MM-DD')]
      this.ayncVisible = true
      this.serach()
      this.radioSelect = null
    },
    serach() {
      this.ayncPagination.page = 1
      this.getayncCodeList()
    },
    getayncCodeList() {
      this.loading = true
      this.$http
        .post('/InvoiceManagement/Inv_InvoiceApplyMain/GetAccountSalesAllList', {
          // this.$http.post('/InvoiceManagement/ST_RDRecord/GetRdRecordByRoleList', {
          PageIndex: this.ayncPagination.page,
          PageRows: this.ayncPagination.size,
          // PageIndex: 1,
          //  PageRows: 1000000,
          Search: {
            RdrecordStartDate: this.ayncTime ? this.ayncTime[0] : '',
            RdrecordEndDate: this.ayncTime ? this.ayncTime[1] : '',
            InvoiceStartDate: this.kpTime ? this.kpTime[0] : '',
            InvoiceEndDate: this.kpTime ? this.kpTime[1] : '',
            KeyWord: this.qryWord,
            // State: this.selectType
          },
        })
        .then((res) => {
          this.loading = false
          if (res.Success) {
            this.ayncData = res.Data
            // this.ayncPagination.total = this.ayncData.filter(item => item.State == this.selectType).length;
          } else {
            this.ayncData = []
            this.ayncPagination.total = 0
            this.$message.error(res.Msg)
          }
        })
    },
    aynchandleSizeChange(size) {
      this.ayncPagination.size = size
    },
    aynchandleCurrentChange(page) {
      this.ayncPagination.page = page
    },
    handleOk() {
      if (!this.radioSelect) {
        return this.$message.warning('请选中后确定')
      }
      this.ayncVisible = false
      this.$emit('select', this.radioSelect)
      let list = this.tableDataList.filter(e=>e.Code === this.radioSelect)
      this.$emit('selectObj',list[0])
    },

    setCurrent(row) {
      this.$refs.singleTable.setCurrentRow(row)
    },
    handleCurrentChange(val) {
      this.currentRow = val
      this.selectId = val.Id
    },
    rowClassName(row, rowIndex) {
      return row.row.Id == this.selectId ? 'current-row' : ''
    },
  },
  mounted() {},
  created() {},
  computed: {
    tableDataList() {
      this.ayncPagination.total = this.ayncData.filter((item) => item.State == this.selectType).length
      return this.ayncData
        .filter((item) => item.State == this.selectType)
        .slice(
          (this.ayncPagination.page - 1) * this.ayncPagination.size,
          this.ayncPagination.page * this.ayncPagination.size
        )
    },
  },
  watch: {},
}
</script>
<style lang="less" scoped>
/deep/ .el-statistic .con .number {
  font-size: 12px;
  padding: 0;
}

/deep/ .el-statistic .con {
  justify-content: right;
}
</style>
<style>
.pinkActive {
  background: pink !important;
}
.el-table__cell .cell {
  text-overflow: clip;
}
.radio-class {
  .el-radio__label {
    display: none;
  }
}
</style>
